<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, nextTick, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import {CloseBold, Delete, EditPen, Plus} from "@element-plus/icons-vue";
import ChatService from "@/service/impl/ChatService.js";
import ChatWindow from "@/components/chat/ChatWindow.vue";
import ChatFileList from "@/components/chat/ChatFileList.vue";
import ChatTitleList from "@/components/chat/ChatTitleList.vue";
import ChatModel from "@/model/ChatModel.js";


const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const chatModel = ref(new ChatModel())
const pageTable = ref()
const classification = ref([])
const url = window.webConfig.apiUrl()
const chatTitleList = ref(null)
const chatFileList = ref(null)
const chatWindow = ref(null)
const select = ref({
    id: null
})

const init = () => {
    ChatService.modeList({}).then(res => {
        data.value.list = res.data.modelList
        classification.value = res.data.classs
        select.value.id = 1
        nextTick(() => {
            onTitleRefresh()
            onModelChange()
        })
    })
}
const editOpen = () => {
    chatModel.value = new ChatModel()
    module.value.dialog.load = false
}
const editConfirm = () => {
    module.value.dialog.load = true
    ChatService.modelEdit(chatModel.value).then(res => {
        module.value.dialog.load = false
        module.value.dialog.show = false
        init()
    }).catch(r => {
        module.value.dialog.load = false
    })
}
const delConfirm = () => {
    ChatService.modeDel(chatModel.value).then(res => {
        message.success("删除成功")
        chatModel.value = new ChatModel()
        init()
    })
}

const onModelChange = () => {
    chatModel.value.id = select.value.id
    chatFileList.value.init(chatModel.value.id)
    clearContext({},true)
}
const onSelect = (item) => {
    select.value.id = item.modelId
    chatWindow.value.onSelect(item)
}
const clearContext = (item,all) => {
    chatWindow.value.onClear(item,all)
}
const onTitleRefresh = (item) => {
    chatTitleList.value.init(item)
}

onMounted(() => {
    module.value.layout = {
        tableLeft: true,
        width: "18%",
        table: false,
    }
    module.value.page = false
    module.value.init(ChatService.url.modelEdit, ChatService.url.modelEdit,
        ChatService.url.modeDel, null, null)
    module.value.operations.width = "200px"
    module.value.dialog.width = "40%"
    init()
})



</script>
<template>
    <Page
        @edit-open="editOpen"
        @refresh="init"
        :data="data"
        :module="module"
        @edit-confirm="editConfirm"
        ref="pageTable"
    >
        <template #table>
            <el-row class="main">
                <chat-window class="main-left" ref="chatWindow" :model-id="chatModel.id" @on-title-refresh="onTitleRefresh" />
                <chat-file-list :model-id="chatModel.id" class="main-right" ref="chatFileList"/>
            </el-row>
        </template>
        <template #table-left>
            <chat-title-list ref="chatTitleList" @onSelect="onSelect" @onClose="clearContext"/>
        </template>
        <template #operate-before>
            <el-select v-model="select.id"  style="width: 200px;margin:0 15px 0 15px"
                       @change="onModelChange">
                <template #header class="easyai-header">
                    <el-option
                        class="easyai"
                        v-for="item in data.list.filter(i => i.id === 1)"
                        :key="item.id"
                        :label="item.chatName"
                        :value="item.id"
                    />
                </template>
                <el-option
                    v-for="item in data.list.filter(i => i.id !== 1)"
                    :key="item.id"
                    :label="item.chatName"
                    :value="item.id"
                />
            </el-select>
            <el-popconfirm title="确认要删除吗?删除后先关对话记录以及所伤上传文件会清除。" @confirm="delConfirm">
                <template #reference>
                    <el-button :disabled="chatModel.id === 1" type="danger" :icon="Delete">
                        删除
                    </el-button>
                </template>
            </el-popconfirm>
        </template>
        <template #table-column>
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>
            <el-form :rules="chatModel.rules" :label-width="110" :label-position="'left'"
                     :model="chatModel" style="width: 100%;padding: 5px">
                <el-form-item label="选择分类" prop="name">
                    <el-select
                        v-model="chatModel.languageClassificationId"
                        clearable
                    >
                        <el-option
                            v-for="item in classification"
                            :key="item.id"
                            :label="item.className"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="模式名称" prop="chatName">
                    <el-input v-model="chatModel.chatName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="模式描述" prop="chatDesc">
                    <el-input v-model="chatModel.chatDesc" autocomplete="off"/>
                </el-form-item>
            </el-form>
        </template>
        <template #table-search>

        </template>

    </Page>

</template>

<style lang="scss" scoped>
.main{
    width: 100%;
    height: 100%;
    float: left;
}
.main-left{
    width: 75%;
    height: 100%;
}
.main-right{
    margin-left: 10px;
    width: calc(25% - 10px);
    height: calc(100% - 5px);
    border: 1px solid var(--el-menu-border-color);
}
.easyai{
    list-style-type: none;
    padding-left: 8px;
}
</style>
